<template>
  <div id="mySale-detail">
    <a-spin :spinning="spinning">
    <template v-for="item in tabelData" v-key="index">
      <div class="container" style="position: relative;" v-if="item.recStatus == 'T'">
        <a-button class="qrBtn" type="primary" @click="confirmOrder(item)" v-if="item.recStatus == 'T'">处理</a-button>
        <template v-if="item.recTime || item.memo">
          <div class="container-title">商议内容</div>
          <div style="padding:20px 0">提交时间 {{item.recTime}} <span style="padding-left:20px">商议内容:{{item.memo}}</span></div>
        </template>
        <div class="container-title">预订明细</div>
        <div class="title-info">
        </div>
        <div class="order-table">
          <a-row class="table-header">
            <a-col :span="8" class="header-item">商品</a-col>
            <a-col :span="4" class="header-item">调出单价</a-col>
            <a-col :span="4" class="header-item">调出数量</a-col>
            <a-col :span="4" class="header-item">调入单价</a-col>
            <a-col :span="4" class="header-item">调入数量</a-col>
          </a-row>
        </div>
        <div
            class="table-item"
            v-for="(items, index) in item.details"
            :key="index"
          >
            <a-row class="table-item-body">
              <a-col :span="8" class="flex-row">
                <img :src="items.goodsPic" class="table-pic" />
                <div class="table-info">
                  <p class="info-name">{{ items.ncMaterielName }}</p>
                  <p>规格：{{ items.goodsSpec }}</p>
                  <p>单位：{{ items.goodsUnit }}</p>
                </div>
              </a-col>
              <a-col :span="4" class="item-col">
                ￥{{ items.sendPrice }}
              </a-col>
              <a-col :span="4" class="item-col">
                {{ items.sendNumber }}
              </a-col>
              <a-col :span="4" class="item-col">
                ￥{{ items.recPrice }}
              </a-col>
              <a-col :span="4" class="item-col">
                {{ items.recNumber }}
              </a-col>

            </a-row>
          </div>
          <div class="table-empty" v-if="!tabelData.length">
            <img src="@/assets/images/empty.png" />
            <span>暂无数据</span>
          </div>
      </div>
    </template>
      <CommonDialog
        :rows="rows"
        :form="dialogForm"
        title="处理"
        :visible="visible"
        @hideDialog="hideVisible"
        @confirm="confirmHandle()"
      />
    </a-spin>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';

@Component
export default class Ground extends Vue {
  spinning:boolean = false
  form: any = {
    orgName: undefined,
    orgCode: undefined,
    warehouseId: undefined,
    warehouseName: undefined,
    recMan: undefined,
    recPhone: undefined,
    recAddress: undefined,
    ncProjectId: undefined,
    shopOrderSn: undefined
  }
  visible:boolean = false
  Data: any = []// 发货明细
  sendData: any = []// 发货记录
  tabelData: any = []// 预订明细
  pageConfig: any = {
    current: 1,
    total: 10,
    pageSize: 10
  }
  projects: any = [] // 购入项目列表
  warehouses: any = [] // 购入仓库
  checkGoodsList: any = [] // 选中的商品列表
  ncProjectName: any = '' // 项目名称
  orgName: any = '' // 组织名称
  checkAll:boolean= false
  showVisible:boolean= false
  driverFiles: any = [] // 驾驶证图片
  files: any = [] // 其他图片
  isNegotiationData:any = {}
  tableColumn: any = {
    goodsName: {
      label: '商品名称'
    },
    goodsSpec: {
      label: '规格'
    },
    goodsUnit: {
      label: '单位'
    },
    sendNumber: {
      label: '发货数量'
    },
    sendPrice: {
      label: '发货单价'
    },
    recNumber: {
      label: '收货数量'
    },
    recPrice: {
      label: '收货单价'
    }
  }

  get shopOrderTitleId () {
    return this.$route.query.shopOrderTitleId
  }
  // dialog
  dialogForm: any = {
    checkStatus: true,
    descr: ''
  }
  get rows () {
    return {
      checkStatus: {
        label: '审核状态',
        el: 'radio',
        option: [
          {
            label: '同意',
            value: true
          },
          {
            label: '驳回',
            value: false
          }
        ],
        rules: [
          { required: true, message: '请选择审核状态', trigger: 'change' }
        ]
      },
      descr: {
        el: 'textarea',
        label: '审核说明',
        placeholder: '请输入备注',
        rules: [
            { validator: this.remarkVali, trigger: 'blur' }
        ]
      }
    }
  }

  init () {
    this.getDetail()
  }
  // 隐藏dialog
  hideVisible () {
    this.visible = false
  }
  remarkVali (rule: any, value: string, callback: any) {
    if (!this.dialogForm.checkStatus && !value.trim().length) {
      return callback(new Error('请填写拒绝原因'))
    }
    callback()
  }
  // 点击去处理
  confirmOrder (arr:any) {
    this.isNegotiationData = arr
    this.visible = true
  }
  confirmHandle () {
    let that = this
    this.isNegotiationData.descr = this.dialogForm.descr
    this.visible = false
    this.spinning = true
    if (this.dialogForm.checkStatus) {
      this.$api.orderAgreeTalkFetch(this.isNegotiationData).then(res => {
        if (res.code == 0) {
          this.$message.success('操作成功')
          setTimeout(() => {
            that.$router.back()
          }, 1000);
        }
      }).catch(() => {
        this.spinning = false
      })
    } else {
      this.$api.orderRefuseTalkFetch(this.isNegotiationData).then(res => {
        if (res.code == 0) {
          this.$message.success('操作成功')
          setTimeout(() => {
            that.$router.back()
          }, 1000);
        }
      }).catch(() => {
        this.spinning = false
      })
    }
  }
  getDetail () {
    let data = {
      titleId: this.shopOrderTitleId
    }
    this.$api.orderMyDetailFetch(data).then((res: any) => {
      this.form = res.data
      this.tabelData = res.data.recVOS
    });
  }
}
</script>

<style lang="scss" scoped>
#mySale-detail {
    .top-box{
      margin-bottom: 15px;
        .box-title{
            font-size: 16px;
            font-weight: 700;
            padding-left: 5px;
            color: #000;
            height: 15px;
            line-height: 15px;
            border-left: 3px solid rgb(62, 149, 231);
        }
    }
    .info{
        padding: 10px 0;
        .address{
          display: flex;
        }
        .info-left{
            width: 65px;
            margin-right: 10px;
        }
    }
    .container-title{
      font-size: 16px;
      font-weight: 700;
      padding-left: 5px;
      color: #000;
      height: 15px;
      line-height: 15px;
      border-left: 3px solid rgb(62, 149, 231);
    }
    .title-info{
      margin: 20px 0;
      font-size: 16px;
      .info-left{
        font-weight: 700;
      }
      .info-right{
        margin-right: 80px;
      }
    }
    .header-item{
      text-align: center;
    }
    .table-item{
      .table-item-body {
        border-bottom: 1px solid #F1F1F1;
        // border-top: 1px solid #F1F1F1;
        // margin-bottom: 16px;
        .ant-col {
            height: 152px;
            padding: 16px 20px;
            border-right: 1px solid #F1F1F1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            color: #333;
            &:last-child {
                border-right: none;
            }
            p {
                margin-bottom: 0;
            }
            .table-pic {
                max-width: 160px;
                width: 50%;
                height: 120px;
                display: block;
                object-fit: cover;
                margin-right: 24px;
            }
            .table-info {
                display: flex;
                flex-direction: column;
                p {
                    font-size: 13px;
                    color: #999;
                }
                .info-name {
                    // @include limitLine(2);
                    margin-bottom: 16px;
                    font-size: 14px;
                    color: #000;
                    font-weight: 700;
                    // cursor: pointer;
                    // &:hover {
                    //     text-decoration: underline;
                    // }
                }
            }
        }
        .flex-row {
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            .ant-btn {
                margin-right: 12px;
                font-size: 12px;
            }
        }
        .item-col{
          text-align: center;
        }

    }
  }
}
.model-icon{
  color: green;

  .icon{
    font-size: 50px;
  }
}
.model-text{
  font-weight: 700;
  font-size: 16px;
}
.container{
  padding-bottom: 30px;
  border-bottom: 20px solid #ebf0f5;
  height: 450px;
  overflow-x: hidden;
	overflow-y: scroll;
}
.container::-webkit-scrollbar{
	display: none;
}
.delivery-record{
  margin: 0 10px;
  padding-left: 20px;
  border-left: 1px solid #4286ff;
  position: relative;
  padding-top: 30px;
  &:nth-child(2){
    padding-top: 0;
  }
  .circle{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: #4286ff;
    background-color: #4286ff;
    position: absolute;
    left: -10px;
  }
  .record-info{
    margin-bottom: 15px;
    .info-img{
      display: flex;
      width: 120px;
      height: 120px;
    }
  }
}
.qrBtn{
  position: absolute;
  top: 10px;
  right: 10px;
}
/deep/ .ant-select-selection-selected-value, .ant-input[disabled]{
  color: rgba(0, 0, 0, 0.8);
}
/deep/ .ant-input-number-input{
   color: rgba(0, 0, 0, 0.8) ;
 }
</style>
